<script lang="ts" setup>
import { ElMessage, ElTable } from 'element-plus'
import { reactive, ref } from 'vue'
import { PostSendcoupon } from '@/api/modules/subscribercouponpackage.ts'
import { GetData } from '@/api/modules/subscriber.ts'

const route = useRoute()
const ticketId = route.query.ticketId
// 查询表单
const findFrom = ref({
  UserId: '',
  SCOpenId: '',
  UserPhone: '',
  UserNickName: '',
})
// 加载
const loading = ref(false)
// 数据列表
const dataList = reactive({
  list: [],
})
const total = ref(0)
let PageSize = 20
// const imgDomain = 'https://img1.eprhan.cc'

// 获取数据
async function GetDataList(PageIndex: number = 1, PageSize: number = 20) {
  const params = {
    PageIndex,
    PageSize,
    ...(findFrom.value.UserId && ({ UserId: findFrom.value.UserId })),
    ...(findFrom.value.SCOpenId && ({ SCOpenId: findFrom.value.SCOpenId })),
    ...(findFrom.value.UserPhone && ({ UserPhone: findFrom.value.UserPhone })),
    ...(findFrom.value.UserNickName && ({ UserNickName: findFrom.value.UserNickName })),
  }
  await GetData(params).then(async (dataRes: any) => {
    if (dataRes.succeeded) {
      dataList.list = dataRes.data.items
      total.value = dataRes.data.total
      loading.value = false
    }
  })
  loading.value = false
}

const params = reactive({
  ticketId,
  userId: 0,
  sendNum: 0,
})
const dialogFormVisible = ref(false)
function Grant(userId: number) {
  params.userId = userId
  dialogFormVisible.value = true
}

function GrantVoucher() {
  // console.log(params)
  if (params.sendNum === 0) {
    ElMessage.error('发放数量不能为0')
    return
  }
  else if (params.sendNum > 10) {
    ElMessage.error('发放数量不能大于10')
    return
  }
  PostSendcoupon(params).then((res: any) => {
    if (res.succeeded) {
      ElMessage.success('发放成功')
      dialogFormVisible.value = false
      GetDataList()
    }
    else {
      ElMessage.error(`发放失败${res.errors}`)
    }
  })
}

// 查询
function Inquire() {
  GetDataList(1, PageSize)
}

// 翻页
function handleSizeChange(val: number) {
  GetDataList(1, val)
  PageSize = val
}
function handleCurrentChange(val: number) {
  GetDataList(val, PageSize)
  // PageNum = val
}

onMounted(() => {
  GetDataList()
})
</script>

<template>
  <div>
    <PageMain>
      <SearchBar :show-toggle="false">
        <div class="header">
          <el-form label-positio="right" label-width="auto">
            <div class="from">
              <el-form-item label="用户ID">
                <el-input v-model="findFrom.UserId" placeholder="请输入用户ID" clearable />
              </el-form-item>
              <el-form-item label="OpenId">
                <el-input v-model="findFrom.SCOpenId" placeholder="请输入OpenId" clearable />
              </el-form-item>
              <el-form-item label="授权手机号">
                <el-input v-model="findFrom.UserPhone" placeholder="请输入授权手机号" clearable />
              </el-form-item>
              <el-form-item label="微信昵称">
                <el-input v-model="findFrom.UserNickName" placeholder="请输入微信昵称" clearable />
              </el-form-item>
            </div>
          </el-form>
          <div class="text-right">
            <el-button @click="Inquire">
              查询
            </el-button>
          </div>
        </div>
      </SearchBar>
      <ElDivider border-style="dashed" />
      <ElTable v-loading="loading" :data="dataList.list" stripe style="width: 100%;" border>
        <el-table-column align="center" prop="userId" label="用户ID" width="100" />
        <el-table-column align="center" prop="userNickName" label="顾客信息" width="200">
          <template #default="scope">
            <div v-if="!scope.row.userNickName">
              未授权
            </div>
            <div v-else class="user-name">
              <el-avatar :size="40" style="margin-right: 10px;" :src="scope.row.userAvatar" />
              <div>
                <p style="margin: 0;">
                  {{ scope.row.userNickName }}
                </p>
                <span>
                  {{ scope.row.userPhone }}
                </span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="scOpenId" label="OpenId" width="300" />
        <el-table-column align="center" prop="unionId" label="联合ID" width="300" />
        <el-table-column header-align="center" prop="desp" label="备注" width="300" />
        <el-table-column align="center" prop="addTime" label="加入时间" width="230" />
        <el-table-column align="center" prop="updateTime" label="更新时间" width="230" />
        <el-table-column align="center" prop="gender" label="授权时间" width="230">
          <template #default="scope">
            <span>
              {{ scope.row.userPhone ? scope.row.bindTime : '未授权' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="scOpenId" label="操作" fixed="right" min-width="150">
          <template #default="scope">
            <el-button type="success" :disabled="scope.row.flag === -1" @click="Grant(scope.row.userId)">
              发放
            </el-button>
          </template>
        </el-table-column>
      </ElTable>
      <div style="height: 10px;" />
      <el-pagination
        :default-page-size="20"
        :page-sizes="[5, 10, 20, 50, 100]"
        layout="total, sizes, ->, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </PageMain>
    <el-dialog v-model="dialogFormVisible" title="请填写发送数量" width="500">
      <el-form :model="params">
        <el-form-item label="发送数量">
          <el-input v-model="params.sendNum" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="GrantVoucher">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.header {
  display: grid;
  grid-template-columns: 6fr 1fr;

  .from {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
  }
}

.statisticis {
  margin-bottom: 20px;
  color: rgb(121 121 121);

  span {
    margin-right: 15px;
  }
}

.user-name {
  display: flex;
  align-items: center;
  justify-content: left;

  div {
    text-align: left;
  }
}

.el-form-item {
  margin-bottom: 0;
}
</style>
